<!DOCTYPE html >
<html>
<head>
    <title>Pie Representation-Highcharts QBuilder</title>
    
    <script type="text/javascript" src="../../../libraries/jquery-1.6.2.min.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/highcharts.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/modules/exporting.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/themes/gray.js"></script>

    <script type="text/javascript">
      var chart;
      $(document).ready(function() {
      chart = new Highcharts.Chart({
          chart: {
              renderTo: 'container',
              defaultSeriesType: 'bar'
          },
      title: {
          text: 'Nombre de commande par acheteur, classer par categorie de produit'
      },
      xAxis: {
          categories: ['albert', 'jim', 'joe', 'tom'],

          title: {
              text: null
          }
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Quantite de commande',
              align: 'high'
          }
      },
      tooltip: {
          formatter: function() {
              return ''+
                  this.series.name +': '+ this.y +' commandes';
          }
      },
      plotOptions: {
          bar: {
              dataLabels: {
                  enabled: true
              }
          }
      },
      legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: -10,
          y: 250,
          floating: true,
          borderWidth: 1,
          backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF',
          shadow: true
      },
      credits: {
          enabled: false
      },
      series: [{
          name: 'stuff',
          data: [126, 115, 104, 109]
      }, {
          name: 'tool',
          data: [123, 119, 101, 113]
      }, {
          name: 'toy',
          data: [120, 108, 101, 114]
      }]
   });
});
    </script>

</head>
<body>
    <div id="container" style="height:410px; margin: 0 2em; min-width: 600px">
</body>
</html>
